<template>
  <div class="page-container">
    <card class="add-info-card" title="订单信息" toggle>
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="车牌号">{{ orderDetails.carLicenseNo }}</a-descriptions-item>
            <a-descriptions-item label="车型">{{ orderDetails.carModelName }}</a-descriptions-item>
            <a-descriptions-item label="归属门店">{{ orderDetails.siteName }}</a-descriptions-item>
            <a-descriptions-item :label="feeCategory == 1 ? '保养单号' : feeCategory == 2 ? '维修单号' : '年检单号'">{{
              orderDetails.businesCode
            }}</a-descriptions-item>
            <a-descriptions-item :label="feeCategory == 1 ? '保养状态' : feeCategory == 2 ? '维修状态' : '年检状态'">{{
              orderDetails.createNodeName
            }}</a-descriptions-item>
            <a-descriptions-item label="入厂时间">{{ orderDetails.startTime }}</a-descriptions-item>
            <a-descriptions-item label="出厂时间">{{ orderDetails.endTime }}</a-descriptions-item>
            <a-descriptions-item :label="feeCategory == 3 ? '年检厂' : '修理厂'">{{ orderDetails.supplierName }}</a-descriptions-item>
            <a-descriptions-item label="负责人">{{ orderDetails.undertaker }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="费用信息" :showDivider="false">
      <div class="table-info">
        <span class="table-info-item">
          应付： <span class="a-link">{{ unitVal(orderDetails.dealWith, '元') }} </span>
        </span>
        <span class="table-info-item">
          实付： <span class="a-link">{{ unitVal(orderDetails.actuallyPaid, '元') }} </span>
        </span>
      </div>
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="getOrderDetails" />
      <table-index class="insure-card-table" :table="tableCompulsory" @loadData="getOrderDetails">
        <template #billmsg="{ record }"> {{ record.confirmUserName }}{{ record.confirmTime }} </template>
        <template #okmsg="{ record }"> {{ record.recordConfirmUserName }}{{ record.recordConfirmTime }} </template>
        <template #expand-icon="{ expanded }">
          <icon-plus-circle style="font-size: 40px; color: #0256ff" v-if="!expanded" />
          <icon-minus-circle style="font-size: 40px; color: #0256ff" v-else />
        </template>
      </table-index>
    </card>
  </div>
</template>

<script setup name="Maintenancedetail" lang="ts">
  import { unitVal } from '@/utils'
  import { onMounted, ref, reactive, computed } from 'vue'
  import { getBillingDetails } from '@/api/finance/costConfirm.js'
  import { useTable } from '@/hooks/table'
  import { useRoute } from 'vue-router'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('carAssetFeeDict')
  const pageId = ref()
  const route = useRoute()
  const routeQuery = route.query
  const feeCategory = ref(null) //(0 购置费 1保养 2维修 3年检 4违章)'
  const orderDetails = ref({})
  const queryParam = reactive({})
  // 查询条件
  const searchList = computed(() => {
    return [
      // { label: '费用类型', prop: 'feeType', type: 'a-select', options: dict.carAssetFeeTypeEnum },
      { label: '收支类型', prop: 'costType', type: 'a-select', options: dict.costTypeEnum },
      { label: '费用状态', prop: 'feeStatus', type: 'a-select', options: dict.feeStatusEnum },
    ]
  })
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '费用名称', dataIndex: 'feeName', fixed: 'left', width: 180 },
      { title: '费用类型', dataIndex: 'feeTypeName' },
      { title: '收支类型', dataIndex: 'costTypeName' },
      { title: '费用金额', dataIndex: 'totalAmount', unit: '元' },
      { title: '待结金额', dataIndex: 'outstandingAmount', unit: '元' },
      { title: '生成节点', dataIndex: 'createNodeName' },
      { title: '生成时间', dataIndex: 'createTime', width: 180 },
      {
        title: '应结日期',
        dataIndex: 'dueDate',
        titleTooltipContent: '取自供应商结算配置',
      },
      { title: '收支方式', dataIndex: 'payTypeName' },
      { title: '费用状态', dataIndex: 'feeStatusName' },
      { title: '确认时间', dataIndex: 'confirmTime', width: 180 },
      { title: '确认人', dataIndex: 'confirmUserName' },
      { title: '备注', dataIndex: 'remark' },
      { title: '确认对账信息', dataIndex: 'field_61', slotName: 'billmsg', width: 230 },
      { title: '流水号', dataIndex: 'recordCode', width: 200 },
      { title: '流水状态', dataIndex: 'recordStatusName' },
      { title: '流水确认信息', dataIndex: 'operateUserName', slotName: 'okmsg', width: 230 },
    ],
    buttons: [],
    expandable: {},
  })

  const tabletolist = (list: any) => {
    list.forEach((el: any) => {
      el.mtype = 'MENU'
      el.level = 1
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children.forEach((pl: any) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM'
          pl.expand = null
          pl.feeName = pl.itemName
          pl.totalAmount = pl.amount
        })
      } else {
        return false
      }
    })
    return list
  }

  // 获取订单详情
  const getOrderDetails = async () => {
    tableCompulsory.tableLoading = true
    const { result } = await getBillingDetails({ businesId: pageId.value, feeCategory: feeCategory.value })

    const dataOne = []
    if(result.list && result.list.length){
      result.list.forEach((i)=>{
        if((queryParam.feeType == undefined || queryParam.feeType === i.feeType) && (queryParam.costType == undefined || queryParam.costType === i.costType) && (queryParam.feeStatus == undefined || queryParam.feeStatus === i.feeStatus) ){
          dataOne.push(i)
        }
      })
    }

    setTimeout(() => {
      tableCompulsory.dataList = tabletolist(dataOne)
    }, 0)

    orderDetails.value = result
    tableCompulsory.tableLoading = false
  }
  onMounted(() => {
    feeCategory.value = routeQuery.feeCategory
    if (Number(route.params.id)) {
      pageId.value = Number(route.params.id)
      getOrderDetails()
    }
  })
</script>

<style lang="less" scoped>
  .quick-search-item-value-checked {
    color: #1890ff;
  }
  :deep(.arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-expand-btn:hover) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  .table-info{
    margin-bottom: 20px;
  }
</style>
